<template>
    <div id="box">

<!--        放大镜-->
        <div id="box_lens">
            <div class="lens_top">
                <div class="top_lef">
                    <div class="masking" @mouseenter="EnterHandler" @mouseout="OutHandler" @mousemove="MoveHandler"></div>
                    <img v-lazy="this.pic" alt="">
                    <div class="lef_masking" v-show="topShow" :style="topStyle"></div>
                </div>
<!--                放大的图片-->
                <div class="top_pic" v-show="rShow">
                    <img v-lazy="this.pic" alt="" :style="r_img">
                </div>
                <div class="top_rig">
                    <ul class="rig_img">
                        <li v-for="item in img" class="aaa" :key="item.id">
                            <img v-lazy="item" alt="" @mouseenter="MyPic" id="piv">
                        </li>
                    </ul>
                </div>
            </div>
<!--            放大镜底部评价-->
            <div class="lens_footer">
                <ul>
                    <li>
                        <span class="spa1">销量人气</span>
                        <span class="spa2">200+</span>
                        <span class="spa3" @mouseenter="ChangeActive" @mouseout="OutActive"><i class="iconfont icon-qizhi-"></i>销量人气</span>
                    </li>
                    <p></p>
                    <li>
                        <span class="spa1">商品评价</span>
                        <span class="spa2">400+</span>
                        <span class="spa3" @mouseenter="ChangeActive" @mouseout="OutActive"><i class="iconfont icon-comment"></i>查看评价</span>
                    </li>
                    <p></p>
                    <li>
                        <span class="spa1">收藏人气</span>
                        <span class="spa2">600+</span>
                        <span class="spa3" @mouseenter="ChangeActive" @mouseout="OutActive"><i class="iconfont icon-shoucang"></i>收藏商品</span>
                    </li>
                    <p></p>
                    <li>
                        <span class="spa1">品牌信息</span>
                        <span class="spa2">苏宁电器</span>
                        <span class="spa3" @mouseenter="ChangeActive" @mouseout="OutActive"><i class="iconfont icon-dynamic-filling"></i>品牌主页</span>
                    </li>
                </ul>
            </div>
        </div>

<!--        商品详情-->
        <div id="box_select">
            <p class="select_title">{{this.name}}</p>
            <p class="select_letter">{{this.desc}}</p>
            <p class="select_price">
                <span class="spa1">￥</span>
                <span class="spa2">{{res.price}}</span>
                <span class="spa3">{{res.oldPrice}}</span>
            </p>
            <div class="select_site">
                <div>
                    <p class="site_p">促销</p>
                    <div class="site_d">12月好物放送，App领券购买直降120元</div>
                </div>
                <div>
                    <p class="site_p">配送</p>
                    <div class="site_d">
                        <p>至</p>
                        <el-cascader :options="option" v-model="selectedOptions" @change="handleChange"></el-cascader>
                    </div>
                </div>
                <div>
                    <p class="site_p">服务</p>
                    <div class="site_d">
                        <span><i class="iconfont icon-dian"></i>无忧退货</span>
                        <span><i class="iconfont icon-dian"></i>快速退款</span>
                        <span><i class="iconfont icon-dian"></i>免费包邮</span>
                        <span class="site_spa">了解详情</span>
                    </div>
                </div>
            </div>
            <div class="select_col">
                <p>颜色</p>
                <ul>
                    <li v-for="item in clr" :key="item.id">
                        <img v-lazy="item" alt="" @click="MyClr" class="clr">
                    </li>
<!--                    <li>-->
<!--                        <img src="https://yanxuan-item.nosdn.127.net/b759cd6f09b6af27dc5c3c68f54413be.jpg" alt="">-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <img src="https://yanxuan-item.nosdn.127.net/b759cd6f09b6af27dc5c3c68f54413be.jpg" alt="">-->
<!--                    </li>-->
                </ul>
            </div>
            <div class="select_size">
                <p class="p1">尺码</p>
                <div class="size_select">
                    <span class="spa" v-for="item in size" @click="MySiz" :key="item.id">{{item}}</span>
                </div>
            </div>
            <div class="select_num">
                <p class="p1">数量</p>
                <div>
                    <span class="spa1" @click="Minus">-</span>
                    <p class="quantity">{{this.num}}</p>
                    <span class="spa2" @click="Plus">+</span>
                </div>
            </div>
            <button class="btn" @click="MyBtn">加入购物车</button>
        </div>
    </div>
</template>
<script>
    import {regionData,CodeToText} from 'element-china-area-data'
    export default{
        data(){
            return {
                //商品数量
                num:'1',

                name:'',
                desc:'',
                img:[],
                res:{},
                size:[],
                clr:[],

                // 鼠标移入显示
                topShow:false,
                rShow:false,
                // 蒙版移动以及大图片显示范围
                topStyle:{transform:''},
                r_img:{},

                // 点击切换展示图
                pic:'',

                // 地址

                options:regionData,
                selectedOptions:[],
                res:null,
            }
        },
        async mounted(){
            const res = await this.$.getGoods(this.$route.params);
            this.res = res;
            this.img = res.data.result.mainPictures;
            this.name = res.data.result.name
            this.desc = res.data.result.desc
            this.res = res.data.result;
            this.pic = this.img[0];
            var a = res.data.result.specs[1].values.length;
            var b = res.data.result.specs[0].values.length;

            for(var i=0; i<a; i++){
                this.size.push(res.data.result.specs[1].values[i].name)
            }
            for(var k=0; k<b; k++){
                this.clr.push(res.data.result.specs[0].values[k].picture)
            }

        },
        methods:{
            Minus(){
                if(this.num < 2){

                }else{
                    this.num--;
                }
            },
            Plus(){
                this.num++;
            },

            // 放大镜效果实现
            EnterHandler(){
                this.topShow = true
                this.rShow = true
            },
            MoveHandler(e){
                let x = e.offsetX;
                let y = e.offsetY;
                // console.log(x,y);
                let topX = x - 100 < 0 ? 0 : x - 100;
                let topY = y - 100 < 0 ? 0 : y - 100;
                if(topX > 200){
                    topX = 200;
                }
                if(topY > 200){
                    topY = 200;
                }
                let a = -(2 * topX);
                let b = -(2 * topY);

                this.topStyle.transform = `translate(${topX}px,${topY}px)`;
                this.r_img.transform = `translate(${a}px,${b}px)`;
            },
            OutHandler(){
                this.topShow = false
                this.rShow = false
            },

            //移入切换展示图
            MyPic(e){
                this.pic = e.target.src
                let piv = document.querySelectorAll("#piv")
                for(var i=0; i<piv.length; i++){
                    piv[i].classList.remove('active')
                }
                e.target.classList.add('active')
            },

            // 颜色
            MyClr(e){
                let clr = document.querySelectorAll(".clr")
                for(var i=0; i<clr.length; i++){
                    clr[i].classList.remove('active')
                }
                e.target.classList.add("active")
            },
            // 尺码
            MySiz(e){
                let spa = document.querySelectorAll(".spa")
                for(var i=0; i<spa.length; i++){
                    spa[i].classList.remove('active')
                }
                e.target.classList.add("active")
            },

            ChangeActive(e){
                e.target.classList.add('active')
            },
            OutActive(e){
                e.target.classList.remove('active')
            },

            //加入购物车
            MyBtn(){
                // console.log(this.res.skus.id);
                // console.log(this.res);
                this.$.addShopper({
                    skuId:this.res.skus[0].id,
                    count:this.num,
                }).then((res)=>{console.log(res)})
                // alert('加入购物车成功')
            },
            handleChange(val){
                console.log(CodeToText[val[0]])
                console.log(CodeToText[val[1]])
                console.log(CodeToText[val[2]])
            }
        }
    }
</script>
<style lang="less" scoped>
    #box{
        width:1240px;
        height:600px;
        /*border:1px solid black;*/
        margin:0 auto;
        padding:30px 0 0 50px;
        font-size:initial;
        display:flex;

        /*左侧放大镜*/
        #box_lens{
            width:480px;
            height:550px;
            /*border:1px solid black;*/
            /*放大镜样式*/
            .lens_top{
                display:flex;
                justify-content:space-between;
                position:relative;
                /*大图片*/
                .top_lef{
                    width:400px;
                    height:400px;
                    position:relative;

                    .masking{
                        width:400px;
                        height:400px;
                        position:absolute;
                        left:0;
                        top:0;
                        z-index:1;
                    }
                    img{
                        width:400px;
                        height:400px;
                        display:inline-block;
                    }
                    .lef_masking{
                        width:200px;
                        height:200px;
                        background:rgba(0,0,0,0.5);
                        position:absolute;
                        left:0;
                        top:0;
                        /*display:none;*/
                    }
                }
                /*放大的图片*/
                .top_pic{
                    width:400px;
                    height:400px;
                    position:absolute;
                    left:410px;
                    top:0;
                    overflow:hidden;
                    /*display:none;*/
                    img{
                        width:800px;
                        height:800px;
                        position:absolute;
                        left:0;
                        top:0;
                        display:inline-block;
                    }
                }
                /*小图片*/
                .top_rig{
                    //ul
                    .rig_img{
                        height:400px;
                        display:flex;
                        flex-direction:column;
                        justify-content:space-between;
                        li{
                            height:68px;
                            font-size:initial;
                            img{
                                width:68px;
                                height:68px;
                            }
                            .active{
                                border:2px solid #27ba9b;
                            }
                        }
                    }
                }
            }
            /*放大镜底部文字样式*/
            .lens_footer{
                width:400px;
                height:150px;
                /*border:1px solid black;*/
                ul{
                    display:flex;
                    p{
                        width:1px;
                        height:60px;
                        background-color:#e4e4e4;
                        margin-top:40px;
                    }
                    li{
                    /*    */
                        width:99px;
                        height:150px;
                        display:flex;
                        flex-direction:column;
                        text-align:center;
                        font-size:14px;

                        .spa1{
                            margin-top:30px;
                            color:#999999;
                        }
                        .spa2{
                            margin:17px 0;
                            color:#cf4444;
                            font-size:13px;
                        }
                        .spa3{
                            color: #666666;
                            cursor:pointer;
                            user-select:none;
                        }
                        .active{
                            color:#27ba9b;
                        }
                        i{
                            padding:3px;
                        }
                    }
                }
            }
        }
        /*右侧商品详情*/
        #box_select{
            width:600px;
            height:500px;
            /*border:1px solid red;*/
            padding:6px 0 0 50px;

            .select_title{
                font-size:23px;
                /*font-weight:bold;*/
            }
            .select_letter{
                font-size:14px;
                color:#999999;
                margin:18px 0 20px 0;
            }
            .select_price{
                .spa1{
                    font-size:11px;
                    color:#cf4444;
                }
                .spa2{
                    font-size:18px;
                    color:#cf4444;
                }
                .spa3{
                    font-size:11px;
                    color:#999999;
                    text-decoration:line-through;
                    margin-left:10px;
                }
            }
            /*配货地址*/
            .select_site{
                width:500px;
                height:150px;
                background: #f5f5f5;
                margin:17px 0 20px 0;
                display:flex;
                flex-direction:column;
                justify-content:space-around;
                padding:15px 10px;
                div{
                    display:flex;
                    .site_p{
                        font-size:14px;
                        color:#999999;
                        margin-right:22px;
                    }
                    .site_d{
                        font-size:14px;
                        color:#666666;
                        p{
                            margin-right:5px;
                        }
                        i{
                            width:14px;
                            height:14px;
                            display:inline-block;
                        }
                        .site_spa{
                            color:#27ba9b;
                            margin-left:5px;
                            cursor:pointer;
                            user-select:none;
                        }
                    }
                }
            }
            /*颜色*/
            .select_col{
                /*height:50px;*/
                display:flex;
                margin:20px 0 15px 0;
                line-height:50px;
                p{
                    width:50px;
                    font-size:15px;
                    color:#999999;
                    margin:0 0 0 10px;
                }
                ul{
                    width:570px;
                    display:flex;
                    flex-wrap:wrap;
                    li{
                        img{
                            width:50px;
                            height:50px;
                            border:1px solid #999999;
                            margin-left:10px;
                            cursor:pointer;
                            user-select:none;
                        }
                        .active{
                            border:1px solid #27ba9b;
                        }
                    }
                }
            }
            /*尺寸*/
            .select_size{
                display:flex;
                .p1{
                    width:50px;
                    font-size:15px;
                    color:#999999;
                    margin:0 0 0 10px;
                }
                .size_select{
                    width:570px;
                    display:flex;
                    flex-wrap:wrap;
                    margin:0 0 0 8px;
                    .spa{
                        height:28px;
                        line-height:28px;
                        padding:0 20px;
                        border:1px solid #999999;
                        margin:0 5px 5px 0;
                        color:#666;
                        font-size:14px;
                        cursor:pointer;
                        user-select:none;
                    }
                    .active{
                        border:1px solid #27ba9b;
                    }
                }
            }
            /*数量*/
            .select_num{
                height:30px;
                line-height:30px;
                display:flex;
                margin-top:10px;
                .p1{
                    width:50px;
                    font-size:15px;
                    color:#999999;
                    margin:0 0 0 10px;
                }
                div{
                    border:1px solid #e4e4e4;
                    display:flex;
                    text-align:center;
                    .spa1{
                        width:30px;
                        height:28px;
                        border-right:1px solid #e4e4e4;
                        background: #f8f8f8;
                        color:#666666;
                        cursor:pointer;
                        user-select:none;
                    }
                    .quantity{
                        width:60px;
                        height:30px;
                        color:#666666;
                    }
                    .spa2{
                        width:30px;
                        height:28px;
                        border-left:1px solid #e4e4e4;
                        background: #f8f8f8;
                        color:#666666;
                        cursor:pointer;
                        user-select:none;
                    }
                }
            }
            /*加入购物车*/
            .btn{
                width:180px;
                height:50px;
                line-height:50px;
                background: #27ba9b;
                color:#ffffff;
                text-align:center;
                border:none;
                border-radius:8px;
                margin-top:20px;
                cursor:pointer;
                user-select:none;
            }
        }

        img{
            display:inline-block;
        }
        ul li{
            padding:0;
            margin:0;
            list-style:none;
        }
    }

    @font-face {
        font-family: "iconfont"; /* Project id 3978032 */
        src: url('//at.alicdn.com/t/c/font_3978032_a42ljnlot3c.woff2?t=1679881301260') format('woff2'),
        url('//at.alicdn.com/t/c/font_3978032_a42ljnlot3c.woff?t=1679881301260') format('woff'),
        url('//at.alicdn.com/t/c/font_3978032_a42ljnlot3c.ttf?t=1679881301260') format('truetype');
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color:#27ba9b;
    }

    .icon-dynamic-filling:before {
        content: "\e68a";
        font-size:14px;
    }

    .icon-comment:before {
        content: "\e6db";
        font-size:14px;
    }

    .icon-shoucang:before {
        content: "\e86d";
        font-size:14px;
    }

    .icon-qizhi-:before {
        content: "\e60a";
        font-size:14px;
    }

    .icon-dian:before {
        content: "\ec1e";
    }

</style>